<template>
  <div class="error-rate-chart">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ErrorRateChart',
  props: {
    errorData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  watch: {
    errorData: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chart) return;
      
      this.chartInstance = echarts.init(this.$refs.chart);
      this.updateChart();
      
      // 响应式处理
      window.addEventListener('resize', this.handleResize);
    },
    
    updateChart() {
      if (!this.chartInstance) return;
      
      const option = this.getChartOption();
      this.chartInstance.setOption(option, true);
    },
    
    getChartOption() {
      const { timestamps, values } = this.errorData;
      
      // 计算警戒线
      const warningThreshold = 2.0; // 警告阈值 2%
      const criticalThreshold = 5.0; // 严重阈值 5%
      
      return {
        backgroundColor: 'transparent',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#e2e8f0',
          borderWidth: 1,
          textStyle: {
            color: '#1f2937'
          },
          formatter: (params) => {
            const param = params[0];
            const value = param.value;
            let status = '正常';
            let statusColor = '#10b981';
            
            if (value >= criticalThreshold) {
              status = '严重';
              statusColor = '#dc2626';
            } else if (value >= warningThreshold) {
              status = '警告';
              statusColor = '#f59e0b';
            }
            
            return `
              <div style="font-weight: 600; margin-bottom: 8px;">${param.axisValue}</div>
              <div style="display: flex; align-items: center; margin: 4px 0;">
                <span style="display: inline-block; width: 12px; height: 12px; background: ${param.color}; border-radius: 50%; margin-right: 8px;"></span>
                <span style="flex: 1;">错误率:</span>
                <span style="font-weight: 600; color: ${param.color};">${value}%</span>
              </div>
              <div style="color: ${statusColor}; font-size: 12px; font-weight: 600;">状态: ${status}</div>
            `;
          }
        },
        legend: {
          show: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timestamps,
          axisLine: {
            lineStyle: {
              color: '#e2e8f0'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#64748b',
            fontSize: 11,
            formatter: (value) => {
              return value.split(':').slice(0, 2).join(':');
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '错误率 (%)',
          nameTextStyle: {
            color: '#64748b',
            fontSize: 12
          },
          min: 0,
          max: Math.max(...values, criticalThreshold) * 1.2,
          splitLine: {
            lineStyle: {
              color: '#f1f5f9',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#64748b',
            fontSize: 12
          }
        },
        series: [
          {
            name: '错误率',
            type: 'line',
            data: values,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#ef4444',
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
                { offset: 1, color: 'rgba(239, 68, 68, 0.05)' }
              ])
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                color: '#dc2626',
                borderColor: '#dc2626',
                borderWidth: 2
              }
            },
            markLine: {
              silent: true,
              symbol: 'none',
              lineStyle: {
                color: '#f59e0b',
                type: 'dashed',
                width: 2
              },
              label: {
                show: true,
                position: 'end',
                formatter: '警告线 (2%)',
                color: '#f59e0b',
                fontSize: 10
              },
              data: [
                {
                  yAxis: warningThreshold
                }
              ]
            },
            markArea: {
              silent: true,
              itemStyle: {
                color: 'rgba(239, 68, 68, 0.1)'
              },
              data: [
                [
                  {
                    yAxis: criticalThreshold
                  },
                  {
                    yAxis: Math.max(...values, criticalThreshold) * 1.2
                  }
                ]
              ]
            }
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      };
    },
    
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>

<style scoped>
.error-rate-chart {
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style> 